<template>
  <div id="data-view">
    <dv-full-screen-container>
      <dv-border-box-11>
        <div class="main-header">
          <div class="mh-left">

          </div>
          <div class="mh-middle">
            气象数据分析
          </div>
          <div class="mh-right">
          </div>
        </div>

        <dv-border-box-1 class="main-container">
          <dv-border-box-3 class="left-chart-container">
            <Left-Chart-2 />
            <Left-Chart-1 :data="realtime_result.realtime" />
            <Left-Chart-3 />
          </dv-border-box-3>

          <div class="right-main-container">
            <div class="rmc-top-container">
              <dv-border-box-9 class="rmctc-left-container">
                <Center-Cmp :alert="realtime_result.alert"/>
              </dv-border-box-9>

              <div class="rmctc-right-container">
                <dv-border-box-8 class="rmctc-chart-1">
                  <Right-Chart-1 />
                </dv-border-box-8>

                <dv-border-box-8 class="rmctc-chart-2" :reverse="true">
                  <Right-Chart-2 />
                </dv-border-box-8>
              </div>
            </div>

            <dv-border-box-13 class="rmc-bottom-container">
              <Bottom-Charts />
            </dv-border-box-13>
          </div>
        </dv-border-box-1>
      </dv-border-box-11>
    </dv-full-screen-container>
  </div>
</template>

<script lang="ts" setup>
import LeftChart1 from './meteorological/LeftChart1.vue'
import LeftChart2 from './meteorological/LeftChart2.vue'
import LeftChart3 from './meteorological/LeftChart3.vue'

import CenterCmp from './meteorological/CenterCmp.vue'

import RightChart1 from './meteorological/RightChart1.vue'
import RightChart2 from './meteorological/RightChart2.vue'

import BottomCharts from './meteorological/BottomCharts.vue'

const realtime_result = {
  "alert": {
    "status": "预警中",
    "pubtimestamp": 1640733900,
    "description": "海淀区气象台29日07时25分发布大风蓝色预警,预计，当前至29日16时，海淀区将有3、4级偏北风，阵风6、7级，请注意防范。",
    "title": "海淀区气象台发布大风蓝色预警[IV/一般]",
    "source": "国家预警信息发布中心",
    "province": "北京市",
    "city": "海淀区",
    "county": "无"
  },
  "realtime": {
    "skycon": 'CLEAR_DAY',
    "skyconName": "晴",
    "temperature": '31.75',
    "humidity": 0.11 * 100,
    "wind": {
      "speed": 30.17,
      "direction": 341.95
    }
  }
}
</script>

<style lang="less" scoped>
#data-view {
  width: 100%;
  height: 100%;
  background-color: #222e6d;
  color: #fff;

  #dv-full-screen-container {
    background-image: url('./img/bg.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-header {
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .mh-left {
      font-size: 20px;
      color: rgb(1, 134, 187);

      a:visited {
        color: rgb(1, 134, 187);
      }
    }

    .mh-middle {
      font-size: 30px;
    }

    .mh-left,
    .mh-right {
      width: 450px;
    }
  }

  .main-container {
    height: calc(~"100% - 80px");

    .border-box-content {
      padding: 20px;
      box-sizing: border-box;
      display: flex;
    }
  }

  .left-chart-container {
    width: 22%;
    padding: 10px;
    box-sizing: border-box;

    .border-box-content {
      flex-direction: column;
    }
  }

  .right-main-container {
    width: 78%;
    padding-left: 5px;
    box-sizing: border-box;
  }

  .rmc-top-container {
    height: 65%;
    display: flex;
  }

  .rmctc-left-container {
    width: 65%;
  }

  .rmctc-right-container {
    width: 35%;
  }

  .rmc-bottom-container {
    height: 35%;
  }

  .rmctc-chart-1,
  .rmctc-chart-2 {
    height: 50%;
  }
}
</style>
